<template>
  <div class="container">
    <ul class="menu-list">
      <li class="menu" @click="ipcHandleSendSystemMsg">发送桌面系统通知</li>
      <li class="menu" title="从渲染器进程代码调用主进程模块并等待结果" @click="ipcHandleOpenFile">
        双向IPC通信获取电脑文件地址
      </li>
      <li
        class="menu"
        title="单向 IPC 消息从渲染器进程发送到主进程，您可以使用 ipcRenderer.send API 发送消息，然后使用 ipcMain.on API 接收"
        @click="ipcHandleExec"
      >
        启动程序
      </li>
    </ul>
    选择的文件路径:{{ state.filePath }}
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'

const state = reactive({
  filePath: ''
})

// 发送系统桌面通知
const ipcHandleSendSystemMsg = () => {
  window.electron.ipcRenderer.send('sysMsg')
}

// 双向ipc通信：打开文件
const ipcHandleOpenFile = async () => {
  const filePath = await window.electron.ipcRenderer.invoke('dialog:openFile')
  state.filePath = filePath
}

// 单向ipc通信
const ipcHandleExec = () => {
  window.electron.ipcRenderer.send('exe:execute', state.filePath)
}
</script>

<style lang="scss" scoped>
.container {
  width: 100%;

  .menu-list {
    width: 100%;
    display: flex;
    flex-direction: row;
    border: 1px dashed #ffffff;

    .menu {
      height: 40px;
      line-height: 40px;
      width: 33%;
      text-align: center;
      cursor: pointer;
      font-size: 16px;
      font-weight: 600;

      &:hover {
        color: orange;
      }
    }
  }
}
</style>
